<template>
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="80%" @closed="onClosed">
    <div id="machine-trajectory-container"></div>
  </el-dialog>
</template>

<script lang="ts" setup>
  import { onMounted, onUnmounted, ref, nextTick } from 'vue'
  import AMapLoader from '@amap/amap-jsapi-loader'
  import { useEventBus } from '@vueuse/core'
  import { MapClickEvent } from '@/types/common'

  const dialogVisible = ref(false)
  const dialogTitle = ref('农机轨迹')

  const bus = useEventBus<string>('farm')

  bus.on(async (event: MapClickEvent, payload) => {
    if (event === MapClickEvent.SHOW_MACHINE_TRAJECTORY) {
      dialogVisible.value = true
      dialogTitle.value = `${payload.id}号${payload.title}轨迹`
      await nextTick()
      initMap()
    }
  })

  const mapRef = ref<any>(null)
  const markerRef = ref<any>(null)

  const initMap = () => {
    AMap.plugin('AMap.MoveAnimation', function () {
      const lineArr = [
        [121.076261, 30.103193],
        [121.074974, 30.101058],
        [121.074572, 30.101244],
        [121.075462, 30.103486],
        [121.074496, 30.103996],
        [121.07204, 30.102446],
        [121.073627, 30.104456],
        [121.071863, 30.103653]
      ]

      mapRef.value = new AMap.Map('machine-trajectory-container', {
        center: [121.073896, 30.102901],
        viewMode: '2D',
        zoom: 18,
        zooms: [18, 20],
        layers: [new AMap.TileLayer.Satellite()],
        showIndoorMap: false,
        features: [],
        dragEnable: true,
        pitch: 0,
        rotation: 152
      })

      markerRef.value = new AMap.Marker({
        map: mapRef.value,
        position: [121.076261, 30.103193],
        icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
        offset: new AMap.Pixel(-13, -26)
      })

      // 绘制轨迹
      const polyline = new AMap.Polyline({
        map: mapRef.value,
        path: lineArr,
        showDir: true,
        strokeColor: '#28F', //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      })

      const passedPolyline = new AMap.Polyline({
        map: mapRef.value,
        strokeColor: '#AF5', //线颜色
        strokeWeight: 6 //线宽
      })

      markerRef.value.on('moving', function (e) {
        passedPolyline.setPath(e.passedPath)
        // mapRef.value.setCenter(e.target.getPosition(), true)
      })

      setTimeout(() => {
        markerRef.value.moveAlong(lineArr, {
          // 每一段的时长
          duration: 2000, //可根据实际采集时间间隔设置
          // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
          autoRotation: true
        })
      }, 1000)

      // mapRef.value.setFitView()

      // window.startAnimation = function startAnimation() {
      //   marker.moveAlong(lineArr, {
      //     duration: 500,
      //     autoRotation: true
      //   })
      // }
      //
      // window.pauseAnimation = function () {
      //   marker.pauseMove()
      // }
      //
      // window.resumeAnimation = function () {
      //   marker.resumeMove()
      // }
      //
      // window.stopAnimation = function () {
      //   marker.stopMove()
      // }
    })
  }

  const onClosed = () => {
    markerRef.value?.stopMove()
    mapRef.value?.destroy()
    console.log('销毁了')
  }
</script>

<style lang="scss" scoped>
  #machine-trajectory-container {
    width: 100%;
    height: 60vh;
    background: linear-gradient(to bottom, #001c13, #001c13) !important;
    :deep(.amap-logo, ) {
      display: none !important;
    }
    :deep(.amap-copyright) {
      display: none !important;
    }
    :deep(.amap-marker) {
      .amap-icon {
        z-index: 10;
      }
      .amap-marker-label {
        padding: 8px 16px 8px 32px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 60px;
        font-size: 18px;
        border: none;
      }
    }
  }
</style>
